¿Cuándo usarías `watch`, `watchEffect` o `computed` y qué errores aparecen al confundirlos?

La mejor forma de responder "¿Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos?" en Vue es separar mecanismo técnico, criterio de uso y señales de revisión.

Una respuesta senior se nota cuando nombras qué riesgo quieres reducir con asincronía en Vue para "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos", qué concesión aceptarías frente a watchers y qué comprobarías antes de extender la decisión a todo el sistema.

Qué evalúa el entrevistador

• Si distingues qué parte de "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos" pertenece a asincronía y cuál debería resolverse en watchers.
• Si conviertes la respuesta en criterios observables: límites claros, impacto en el mantenimiento y forma de detectar regresiones.
• Si sabes ubicar efectos, limpiezas, cancelación y propagación de errores sin contaminar la parte declarativa del código.

Respuesta sólida

• Distingue qué parte puede seguir siendo pura y qué parte necesita sincronizarse con el mundo exterior.
• Describe cómo controlarías suscripciones, cancelación, reintentos o cierre de recursos para que el componente no acumule efectos zombis.
• Si hay asincronía, aclara qué harías con estados intermedios, errores y cambios rápidos de entrada.

Compromisos y errores comunes

• El error habitual es usar efectos para derivar datos que podrían calcularse de forma pura o para tapar un mal diseño de dependencias.
• Sin cancelación ni limpieza es muy fácil dejar trabajo en vuelo, respuestas tardías o cierres obsoletos.

Ejemplo de código

Este fragmento sirve para bajar "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos" a código ejecutable y mostrar qué decisiones conviene hacer explícitas cuando asincronía empieza a cruzarse con watchers.

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

const userId = ref('42');
const user = ref<{ name: string } | null>(null);

async function loadUser(id: string) {
  const response = await fetch(`/api/users/${id}`);
  user.value = await response.json();
}

watch(userId, (id) => {
  void loadUser(id);
});

onMounted(() => {
  void loadUser(userId.value);
});
</script>

Fíjate en que el ejemplo deja claras las fronteras de "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos", nombra los estados relevantes y evita trabajo implícito que luego cuesta depurar.

Ejemplo o caso real

La forma seria de aterrizar "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos" es escoger un caso con usuarios reales, un criterio de éxito visible y una superficie de rollback pequeña. Eso obliga a hablar de impacto, no de dogmas, y evita convertir asincronía en arquitectura ornamental.

Frase corta de entrevista

En "Cuándo usarías watch, watchEffect o computed y qué errores aparecen al confundirlos" me interesa más mantener una fuente de verdad clara y una validación honesta que sonar sofisticado.